<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title th:text="${configurations.get('websiteName')}+' | '+${pageName}">详情页</title>
    <meta name="description" th:content="${configurations.get('websiteDescription')}">
    <meta name="viewport" content="width=device-width">
    <link rel="shortcut icon" th:href="@{${configurations.get('websiteIcon')}}"/>
    <!-- Bootstrap styles -->
    <link rel="stylesheet" th:href="@{/blog/default/css/bootstrap.min.css}">
    <!-- Font-Awesome -->
    <link rel="stylesheet" th:href="@{/blog/default/css/font-awesome/css/font-awesome.min.css}">
    <!-- Styles -->
    <link rel="stylesheet" th:href="@{/blog/default/css/style.css}" id="theme-styles">
    <!-- highlight -->
    <link rel="stylesheet" th:href="@{/blog/plugins/highlight/styles/github.css}">
    <!-- dictionary -->
    <link rel="stylesheet" th:href="@{/blog/plugins/dictionary/dictionary.css}">
    <!-- sweetalert -->
    <link rel="stylesheet" th:href="@{/admin/plugins/sweetalert/sweetalert.css}"/>
    <!--[if lt IE 9]>
    <script th:src="@{/blog/default/js/respond.js}"></script>
    <![endif]-->
</head>
<body>
<header>
    <div class="widewrapper masthead">
        <div class="container">
            <a th:href="@{/index}" id="logo">
                <img th:src="@{${configurations.get('websiteLogo')}}" class="logo-img" alt="my personal blog">
            </a>
            <div id="mobile-nav-toggle" class="pull-right">
                <a href="#" data-toggle="collapse" data-target=".clean-nav .navbar-collapse">
                    <i class="fa fa-bars"></i>
                </a>
            </div>
            <nav class="pull-right clean-nav">
                <div class="collapse navbar-collapse">
                    <ul class="nav nav-pills navbar-nav">
                        <li>
                            <a th:href="@{/index}">主页</a>
                        </li>
                        <li>
                            <a th:href="@{/link}">友链</a>
                        </li>
                        <li>
                            <a th:href="@{/about}">关于</a>
                        </li>
                        <li>
                            <a href="https://github.com/ZHENFENG13">GitHub</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
    <div class="widewrapper subheader">
        <div class="container">
            <div class="clean-breadcrumb">
                <img th:src="@{${blogDetailVO.blogCategoryIcon}}" style=" margin-top: -4px;height: 16px;width: 16px;"
                     alt="my personal blog">
                <a href="#">&nbsp;<th:block th:text="${blogDetailVO.blogCategoryName}"></th:block>
                </a>
            </div>
        </div>
    </div>
</header>
<div class="widewrapper main">
    <div class="container">
        <div class="row">
            <div class="col-md-12 blog-main">
                <article class="blog-post">
                    <div class="body" id="blog-content">
                        <h1 th:text="${blogDetailVO.blogTitle}"></h1>
                        <div class="meta">
                            <i class="fa fa-calendar"></i>
                            <th:block th:text="${#dates.format(blogDetailVO.createTime, 'yyyy-MM-dd')}"></th:block>
                            <span class="separator">&#x2F;</span>
                            <i class="fa fa-comments"></i><span class="data"><a
                                href="#comments"><th:block
                                th:text="${blogDetailVO.commentCount}"></th:block>条评论</a></span>
                            <span class="separator">&#x2F;</span>
                            <i class="fa fa-street-view"></i>
                            <th:block th:text="${blogDetailVO.blogViews}"></th:block>
                            浏览
                        </div>
                        <div class="meta">
                            <p class="post-tags">
                                <th:block th:each="tag : ${blogDetailVO.blogTags}">
                                    <a th:href="@{'/tag/' + ${tag}}">
                                        <th:block th:text="${tag}"></th:block>
                                    </a>
                                </th:block>
                            </p>
                        </div>
                        <th:block th:utext="${blogDetailVO.blogContent}"/>
                    </div>
                </article>
                <aside class="blog-rights clearfix">
                    <p>本站文章除注明转载/出处外，皆为作者原创，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接，否则保留追究法律责任的权利。</p>
                </aside>
                <aside class="comments" id="comments">
                    <th:block th:if="${null != commentPageResult}">
                        <th:block th:each="comment,iterStat : ${commentPageResult.list}">
                            <article class="comment">
                                <header class="clearfix">
                                    <img th:src="@{/blog/default/img/avatar.png}" class="avatar">
                                    <div class="meta">
                                        <h3 th:text="${comment.commentator}"></h3>
                                        <span class="date">
                                       评论时间：<th:block
                                                th:text="${#dates.format(comment.commentCreateTime, 'yyyy-MM-dd HH:mm:ss')}"></th:block>
                                    </span>
                                    </div>
                                </header>
                                <div class="body">
                                    <th:block th:text="${comment.commentBody}"></th:block>
                                </div>
                            </article>
                            <th:block th:unless="${#strings.isEmpty(comment.replyBody)}">
                                <article class="comment reply">
                                    <header class="clearfix">
                                        <img th:src="@{${configurations.get('yourAvatar')}}"
                                             style="float: left;border-radius: 100px;width: 50px;">
                                        <div class="meta2">
                                            <h3 th:text="${configurations.get('yourName')}">十三</h3>
                                            <span class="date">
                                        回复时间： <th:block
                                                    th:text="${#dates.format(comment.replyCreateTime, 'yyyy-MM-dd HH:mm:ss')}"></th:block>
                                    </span>

                                        </div>
                                    </header>
                                    <div class="reply-body">
                                        <th:block th:text="${comment.replyBody}"></th:block>
                                    </div>
                                </article>
                            </th:block>
                        </th:block>
                    </th:block>
                    <th:block th:if="${null != commentPageResult}">
                        <ul class="blog-pagination" style="margin-left: 40%;margin-top:40px;">
                            <li th:class="${commentPageResult.currPage==1}?'disabled' : ''"><a
                                    th:href="@{${commentPageResult.currPage==1}?'##':'/blog/'+${blogDetailVO.blogId}+'?commentPage=' + ${commentPageResult.currPage-1}+'#comments'}">&laquo;</a>
                            </li>
                            <li th:if="${commentPageResult.currPage-3 >=1}"><a
                                    th:href="@{'/blog/'+${blogDetailVO.blogId}+'?commentPage=' + ${commentPageResult.currPage-3}+'#comments'}"
                                    th:text="${commentPageResult.currPage -3}">1</a></li>
                            <li th:if="${commentPageResult.currPage-2 >=1}"><a
                                    th:href="@{'/blog/'+${blogDetailVO.blogId}+'?commentPage=' + ${commentPageResult.currPage-2}+'#comments'}"
                                    th:text="${commentPageResult.currPage -2}">1</a></li>
                            <li th:if="${commentPageResult.currPage-1 >=1}"><a
                                    th:href="@{'/blog/'+${blogDetailVO.blogId}+'?commentPage=' + ${commentPageResult.currPage-1}}"
                                    th:text="${commentPageResult.currPage -1}">1</a></li>
                            <li class="active"><a href="#" th:text="${commentPageResult.currPage}">1</a></li>
                            <li th:if="${commentPageResult.currPage+1 <=commentPageResult.totalPage}"><a
                                    th:href="@{'/blog/'+${blogDetailVO.blogId}+'?commentPage=' + ${commentPageResult.currPage+1}+'#comments'}"
                                    th:text="${commentPageResult.currPage +1}">1</a></li>
                            <li th:if="${commentPageResult.currPage+2 <=commentPageResult.totalPage}"><a
                                    th:href="@{'/blog/'+${blogDetailVO.blogId}+'?commentPage=' + ${commentPageResult.currPage+2}+'#comments'}"
                                    th:text="${commentPageResult.currPage +2}">1</a></li>
                            <li th:if="${commentPageResult.currPage+3 <=commentPageResult.totalPage}"><a
                                    th:href="@{'/blog/'+${blogDetailVO.blogId}+'?commentPage=' + ${commentPageResult.currPage+3}+'#comments'}"
                                    th:text="${commentPageResult.currPage +3}">1</a></li>
                            <li th:class="${commentPageResult.currPage==commentPageResult.totalPage}?'disabled' : ''"><a
                                    th:href="@{${commentPageResult.currPage==commentPageResult.totalPage}?'##' : '/blog/'+${blogDetailVO.blogId}+'?commentPage=' + ${commentPageResult.currPage+1}+'#comments'}">&raquo;</a>
                            </li>
                        </ul>
                    </th:block>
                </aside>
                <th:block th:if="${blogDetailVO.enableComment==0}">

                <aside class="create-comment" id="create-comment">
                    <hr>
                    <h2><i class="fa fa-pencil"></i> 添加评论</h2>
                    <form action="#" method="get" onsubmit="return false;" accept-charset="utf-8">
                        <input type="hidden" id="blogId" name="blogId" th:value="${blogDetailVO.blogId}"></input>
                        <div class="row">
                            <div class="col-md-6">
                                <input type="text" name="commentator" id="commentator" placeholder="(*必填)怎么称呼你?"
                                       class="form-control input-lg">
                            </div>
                            <div class="col-md-6">
                                <input type="email" name="email" id="email" placeholder="(*必填)你的联系邮箱"
                                       class="form-control input-lg">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <input type="text" name="websiteUrl" id="websiteUrl" placeholder="你的网站地址(可不填)"
                                       class="form-control input-lg">
                            </div>
                            <div class="col-md-6">
                                <div class="col-md-4">
                                    <img alt="单击图片刷新！" class="pointer" style="margin-top: 15px; border-radius: 25px;"
                                         th:src="@{/common/kaptcha}"
                                         onclick="this.src='/common/kaptcha?d='+new Date()*1">
                                </div>
                                <div class="col-md-8">
                                    <input type="text" class="form-control input-lg" name="verifyCode" id="verifyCode"
                                           placeholder="(*必填)请输入验证码"
                                           required="true">
                                </div>
                            </div>
                        </div>
                        <textarea rows="10" name="commentBody" id="commentBody" placeholder="(*必填)请输入你的评论"
                                  class="form-control input-lg"></textarea>

                        <div class="buttons clearfix">
                            <button type="submit" id="commentSubmit" class="btn btn-xlarge btn-clean-one">提交</button>
                        </div>
                    </form>
                </aside>
                </th:block>
                <p class="back-top" id="back-top" style="display:none"><a href="#top"><span></span></a></p>
            </div>
        </div>
    </div>
</div>
<!-- 引入页脚footer-fragment -->
<footer th:replace="blog/default/footer::footer-fragment"></footer>
<script th:src="@{/blog/default/js/jquery.min.js}"></script>
<script th:src="@{/blog/default/js/bootstrap.min.js}"></script>
<script th:src="@{/blog/default/js/modernizr.js}"></script>
<script th:src="@{/blog/plugins/highlight/highlight.pack.js}"></script>
<script th:src="@{/blog/plugins/dictionary/dictionary.js}"></script>
<script th:src="@{/blog/plugins/comment/valid.js}"></script>
<script th:src="@{/blog/plugins/comment/comment.js}"></script>
<!-- sweetalert -->
<script th:src="@{/admin/plugins/sweetalert/sweetalert.min.js}"></script>
<script type="text/javascript">
    $(function () {
        $("#back-top").hide();
        $(window).scroll(function () {
            if ($(this).scrollTop() > 300) {
                $('#back-top').fadeIn();
            } else {
                $('#back-top').fadeOut();
            }
        });
        // scroll body to 0px on click
        $('#back-top a').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });

        $('pre code').each(function (i, block) {
            hljs.highlightBlock(block);
        });

        //创建博客目录
        createBlogDirectory("blog-content", "h2", "h3", 20);
    });
</script>
</body>
</html>
